<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      body{
        background-color: #000;
        text-align: center;
      }
      canvas{
        background-color: #fff;
      }
    </style>
    <script type="text/javascript">
    window.onload = function(){
      let my_canvas = document.getElementById('my_canvas');
      let gd = my_canvas.getContext('2d');
      my_canvas.onmousedown=function(ev){
        let preX = ev.offsetX,preY = ev.offsetY;
        document.onmousemove = function(ev){
          if(ev.target !== my_canvas){
            return;
          }
          //一旦调用了beginPath，就必须重新moveTo然后再lineTo
          gd.beginPath();
          gd.moveTo(preX,preY);
          gd.lineTo(ev.offsetX,ev.offsetY);
          preX=ev.offsetX,preY=ev.offsetY;
          gd.lineWidth = 5;
          gd.strokeStyle = document.getElementById('my_color').value;
          gd.stroke();
        }
        document.onmouseup=function(){
          document.onmousemove=null;
        }
      }
    }
    </script>
  </head>
  <body>
    <input type="color" id="my_color" /><br />
    <canvas id="my_canvas" width="800" height="800">
      你的浏览器不支持canvas，请升级你的浏览器~
    </canvas>
  </body>
</html>
